<template>
  <div id="max">
    <el-card class="card">
      <el-button style="color: black;font-weight: bold;font-size: 20px" type="text" class="classification"
                 icon="el-icon-s-release">
        留言板
      </el-button>
      <p>可以说说心事，拉拉家常，吐吐苦水，聊聊秘密，吹吹那啥……</p>
    </el-card>
    <el-card class="card">
      <el-timeline style="padding: 0!important;">
        <div id="card">
          <el-scrollbar v-loading="loading" element-loading-text="拼命加载中">
            <div class="item" v-for="(item,index) in count" :key="index">
              <el-timeline-item :timestamp="count.length-index+'楼'" placement="top">
                <el-card>
                 <div class="fonttile">
                   <span class="font1">{{ item.userId }}</span>
                   <span class="font">&#12288;{{ item.releaseTime }}</span>
                 </div>
                  <p class="font3" v-html="item.message"></p>
                </el-card>
              </el-timeline-item>
            </div>

          </el-scrollbar>
        </div>
      </el-timeline>
    </el-card>

    <el-card class="card">
      <div style="text-align: right">
        <ckeditor :editor="editor" v-model="textarea.message" :config="editorConfig"></ckeditor>
        <el-button type="primary" @click="addBoard" plain>发送</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  name: "Message",
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {},
      loading: true,
      textarea: {message: '', userId: ''},
      count: '',
    }
  },
  created() {
    this.getBoard();
    let token = localStorage.getItem("token");
    if (token != null) {
      this.$axios.post("/user/getuser", {userToken: token}).then((res) => {
        this.textarea.userId = res.data.data.userName;
      })
    }
  },
  methods: {
    getBoard() {
      this.$axios.post("/api/getboard").then((res) => {
        this.count = res.data.data;
        this.loading = false;
      })
    },
    addBoard() {
      if (this.textarea.userId !== '') {
        this.$axios.post("/api/addboard", this.textarea).then((res) => {
          if (res.data.success) {
            this.getBoard();
            this.$notify({
              title: '发表成功',
              message: '恭喜你，成功发表一条留言!',
              type: 'success'
            });
            this.textarea.message = "";
          } else {
            this.$message({
              type: 'error',
              message: res.data.message,
            });
          }
        })
      } else {
        this.$confirm('将以游客身份留言, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post("/api/addboard", this.textarea).then((res) => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '留言成功!'
              });
              this.getBoard();
              this.textarea.message = "";
            } else {
              this.$message({
                type: 'error',
                message: '留言失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消留言'
          });
        });
      }
    },
  }
}
</script>

<style>
#max
{
  font-size: 15.4px;
}
.font {
  font-size: 15.4px;
  color:#a1a1a1;
}

#card {
  height: 600px;
  width: 100%;
}

.card {
  margin: 10px;
  border-radius: 10px;
}

.ck-editor__editable {
  min-height: 100px;
}
.fonttile{
  padding-bottom: 15px;
}
.font1{
  font-size: 15.4px;
  font-weight: 600;
}
.font3{
  font-size: 15.4px;
}
</style>